import React, { Component } from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom'
import QueryString from 'query-string'
import PackageModel from '../../../../models/package'
import WParsing from '../../../../components/marked/parsing'
import { Typography, Breadcrumb } from 'antd';
import { Link } from 'react-router-dom'
const { Title, Text } = Typography;

interface StateInterface {
  model: PackageModel
}

interface PropsInterface extends RouteComponentProps {
}

class WebStudyDetail extends Component<PropsInterface, StateInterface> {

  state: Readonly<StateInterface> = {
    model: new PackageModel()
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    const { id } = QueryString.parse(this.props.location.search)
    PackageModel.getDetail((id as string)).then((model) => {
      this.setState(() => {
        return {
          model: model
        }
      })
    }).catch(() => { })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    const { model } = this.state
    return (
      <div className={'w-content-box'}>
        <br />
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link replace to="/web/package">封装列表</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>封装详情</Breadcrumb.Item>
        </Breadcrumb>
        <br />
        <Title level={3} className={`w-text-center`}>{model.name}</Title>
        <div className={`w-text-center`}>
          <Text type="secondary">{model.dateStr}</Text>
        </div>
        <div className={`w-text-center`}>
          <Text className={`w-text-center`}>{model.describe}</Text>
        </div>
        <br />
        <br />
        <WParsing markedStr={model.content}></WParsing>
        <br />
        <br />
      </div>
    );
  }
}

export default withRouter<PropsInterface>(WebStudyDetail);
